<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-text="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .aa{
            background: #d43f3a;
            width: 100px;
            height: 100px;
        }
        .bb{
            border: 8px solid #8a6d3b;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="div1" @click="div1Click" style="width:600px;height: 600px;background: #0b2e13">
    <div id="div2" @click="div2Click" style="width:400px;height: 400px;background: #00b3ee">
        <div id="div3" @click.stop="div3Click($event)" style="width:200px;height: 200px;background: #8a6d3b">点我</div>
    </div>
    <p >你好<span v-cloak>{{uname}}</span></p>
    <a href="http://www.baidu.com" @click.prevent.stop="write($event)">百度</a></br>
    <!--<a href="http://www.baidu.com" @click="write($event)">百度</a>-->
    <input type="text" @keydown="print($event)" v-model="imgWidth"></br>
    <input type="text" v-model="imgHeight"></br>

    <p style="font-size: 30px;color: #00b3ee">{{imgWidth | test}}</p></br>
    <p style="font-size: 30px;color: #00b3ee">{{imgWidth | number(2)}}</p></br>

    <input type="button" value="登录" v-if="flag"></br>
    <img :src="imgUrl" alt="" :width="imgWidth":height="imgHeight"></br>

    <div :class="style1">class属性</div></br>
    <div :class="{aa:true, bb:true}">class属性</div></br>
    <div :class="{aa:styleFlag, bb:styleFlag}">class属性</div></br>
    <div style="border: 2px solid #999999;background: #3212; color: #d43f3a;width: 200px;height: 200px">1111</div></br>
    <div :style="style2">第2个</div></br>
    <div :style="style3">第三个</div></br>
    {{style2}}
    <p v-text="style1"></p>

    <p v-once>用了{{imgWidth}}</p>
    <p>没用{{imgWidth}}</p>
    <p v-pre>{{imgWidth}}</p><!--内容原样输出不进行编译-->
    <p >{{nowdate | datefomat}}</p>

</div>
</body>
<script>
    Vue.filter("test" , function (data) {
        if (0 >= data || data>= 10) {
            return data
        }
        return "0"+data;
    })

    Vue.filter("number" ,(data,n)=>{
        let num = new Number(data)
        return num.toFixed(n)
    })

    Vue.config.keyCodes = {
        "aa":15,
        "bb":16,
        "回车":18
    }

    new Vue({
        el:"#div1",
        data:{
            flag:false,
            imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590664869045&di=b652d8c87e7096c9eb6ceebae25425c5&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190826%2F826b3025c37a4181ab1635510913c928.jpeg",
            imgWidth:100,
            imgHeight:100,
            style1:"aa",
            styleFlag:true,
            style2:"border: 2px solid #999999;background: #3212; color: #d43f3a;width: 200px;height: 200px",
            style3:{border: "10px solid #a12",fontSize:"20px"},
            uname:"xiaohong",
            nowdate:Date.now()//得到当前日期
        },
        methods:{
            div1Click(){
                console.log("1111")
            },
            div2Click(){
                console.log("2222")
            },
            div3Click(e){
                console.log("3333")
                console.log(e)
            },
            write(e){
                // e.preventDefault();
                // e.stopPropagation();
                this.styleFlag = !this.styleFlag
            },
            print(e){
                console.log(e.keyCode);
                if (e.keyCode==13){
                    console.log("huiche")
                    this.flag=!this.flag
                }
            }

        },
        filters:{
            datefomat:(data)=>{
                let date = new Date(data);
                return date.getFullYear() +"年"+ (date.getMonth()+1) + "月"+date.getDate()+"日 "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()

            },
        },
        created:function () {
            alert("vue创建")
        }
    });
    function d3click(e) {
        e.stopPropagation();
        console.log(e)
        console.log(e.type)
        console.log(e.target)
    }

</script>
</html>